<template>
	<view class="count">
		<view class="list">
			<view v-for="(item,index) in list" :key="index" @click="setsel(item,index)"
				:class="{active:index==ind&&num!=3}" class="item b-r-25 b-f p-30 f f-a-c f-j-b">
				<view class="leftAva f f-a-c">
					<image :src="item.avatar" class="logo" mode="aspectFill"></image>
					<view class="right">
						<view class="Ball">
							{{item.name}}
						</view>
						<view class="muppet">
							{{item.breed}}
						</view>
					</view>
				</view>
				<view v-if="num!=3" class="f f-a-c ">
					<image src="/static/more.png" @click.stop="goCatDetils(item)" class="more" mode=""></image>
					<image src="/static/xingzhuang/Frame@2x.png" @click.stop="detileDet(item)" class="moreDet" mode="">
					</image>
				</view>
			</view>
		</view>
		<view v-if="num!=3" @click="goAddPuss" class="addInd">
			添加猫猫
		</view>
		<u-modal v-model="shows" :show-cancel-button="true" @confirm="confirmFn" :content="content"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shows: false,
				ind: 0,
				page: 1,
				total: 0,
				content: '确认要删除吗？',
				list: [],
				itemId: '',
				id: 0,
				num: 0
			}
		},
		onLoad(options) {
			this.num = options.num
			this.id = options.id
			if (this.num == 3) {
				uni.setNavigationBarTitle({
					title: '他的猫猫'
				})
			}
		},
		onShow() {
			this.list = []
			this.initList()
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++
				this.initList()
			}
			console.log('55555555');
		},
		methods: {
			// 删除子元素
			async detileDet(item) {
				this.itemId = item.id
				this.shows = true
			},
			// 确认删除
			async confirmFn() {
				console.log('22222222222');
				let n = await this.$api.detsPut({
					id: this.itemId
				})
				this.$msg(n.msg)
				if (n.code == 200) {
					setTimeout(() => {
						this.list = []
						this.page = 1
						this.initList()
					}, 1000)
				}
			},
			goCatDetils(item) {
				uni.navigateTo({
					url: '/pages/home/addPuss?num=2&id=' + item.id
				})
			},
			async initList() {
				let n = await this.$api.petList({
					page: this.page,
					userId: this.id
				})
				this.total = n.data.total
				this.list = [...this.list, ...n.data.rows]
			},
			// 添加猫猫
			goAddPuss() {
				uni.navigateTo({
					url: '/pages/home/addPuss?num=1'
				})
			},
			setsel(item, index) {
				if (this.num == 3) return
				this.ind = index
				uni.setStorageSync('homeId', item.id)
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.count {
		// hei
		padding-bottom: 180rpx;
	}

	.addInd {
		position: fixed;
		width: 90%;
		height: 96rpx;
		line-height: 90rpx;
		text-align: center;
		background: $brown;
		border-radius: 48rpx;
		box-shadow: 0rpx 8rpx 32rpx 0rpx rgba(151, 121, 97, 0.20);
		bottom: 80rpx;
		left: 50%;
		transform: translateX(-50%);
		color: #ffffff;
		font-weight: 500;
	}

	.list {
		width: 90%;
		margin: 0 auto;
		padding-top: 30rpx;

		.item {
			border: 2rpx solid transparent;
			margin-bottom: 25rpx;

			.leftAva {
				.logo {
					width: 108rpx;
					height: 110rpx;
					border-radius: 60rpx;
					margin-right: 22rpx;
				}

				.right {
					.Ball {
						font-size: 32rpx;
						font-family: PingFang SC, PingFang SC-500;
						font-weight: 600;
						text-align: LEFT;
						color: $hei;
					}

					.muppet {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC-400;
						font-weight: 400;
						text-align: LEFT;
						color: $hui;
						margin-top: 10rpx;
					}
				}
			}

			.more {
				width: 60rpx;
				height: 60rpx;
			}

			.moreDet {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
			}
		}

		.active {
			border: 2rpx solid $brown !important;
		}
	}
</style>